<template>
<div  class="song-list-album">
  <div class="album-slide">
    <div class="album-img">
      <img :src="songListInfo.pic">
    </div>
    <div class="album-info">
      <h2>简介：</h2>
      <span>{{songListInfo.introduction}}</span>
    </div>
  </div>
  <div class="album-content">
    <div class="album-title">
      <p>{{songListInfo.title}}</p>
    </div>
    <div class="album-score">
      <div>
        <h3>歌单评分：</h3>
        <div>
          <el-rate v-model="average" disabled></el-rate>
        </div>
      </div>
      <span>{{average*2}}</span>
      <div>
        <h3>评价：</h3>
        <div @click="setRank">
          <el-rate v-model="rank" allow-half show-text></el-rate>
        </div>
      </div>
    </div>
    <div class="songs-body">
      <ListContent :songList="songs">
        <template slot="title">歌单</template>
      </ListContent>
      评论
      <Comment :type="1"></Comment>
    </div>
  </div>
</div>
</template>

<script>
import {mapState} from 'vuex'
import ListContent from "@/components/ListContent";
import Comment from "@/components/Comment";
export default {
  name: "SongListInfo",
  mounted() {
     this.songListId=this.$route.params.id
    this.getAllSong()
    this.getRank(this.songListId)
  },
  components:{
    ListContent,Comment
  },
  data(){
    return{
       songListId:'',
       songs:[],
      average:0,
      rank:0
    }
  },
  methods:{
    async getAllSong(){
      let result=await this.$API.reqShowAllSongListSong(this.songListId)
       if (result.code==10000){
         for (let i of result.data){
           await this.getSongById(i.songId)
         }
       }else {
        await Promise.reject(new Error('fail'))
       }
     },
    async getSongById(id){
     let result=await this.$API.reqShowSongBySongId(id)
      if (result.code==10000){
        this.songs.push(result.data)
      }else {
        await Promise.reject(new Error('fail'))
      }
    },
    async getRank(songListId){
     let result= await this.$API.reqShowRank(songListId)
      if (result.code==10000){
        result.data.forEach((item)=>{
          if (this.average<5){
            this.average=item.score/2
          }else {
            this.average=5
          }
        })
      }else {
        this.$notify.info('暂无评分')
        await Promise.reject(new Error('fail'))
      }
    },
    async setRank(){
      if (localStorage.getItem('Token')!=null){
        let params=new URLSearchParams()
        params.append('songListId',this.songListId)
        params.append('consumerId',this.userId)
        params.append('score',new String(this.rank*2))
        let result=await this.$API.reqAddRank(params)
        if (result.code==10000){
          this.$notify.success('评价成功')
        }else{
          this.$notify.error('评价失败')
          await Promise.reject(new Error('fail'))
        }
      }else{
        this.$notify.warning('亲！您还未登录！！')
      }
    }
  },
  computed:{
    ...mapState({
      songListInfo:state => state.info.songListInfo,
      userId:state => state.home.userId
    })
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/song-list-album.scss';
</style>

